<template>
    <view
        class="exam-radio"
        :style="[radioStyle]"
        :class="[`exam-radio-label--${parentData.placement}`]"
    >
        <view class="exam-radio__icon-wrap" @tap.stop="iconClickHandler" :style="[iconStyle]">
            <slot name="icon">
                <view class="exam-radio__icon-wrap__icon" :style="[iconColor, elIconSize]"> </view>
            </slot>
        </view>
        <view class="exam-radio__label" @tap.stop="labelClickHandler">
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: 'exam-radio',
    props: {
        // radio的名称
        name: {
            type: [String, Number],
            default: '',
        },
        // 是否禁用
        disabled: {
            type: [String, Boolean],
            default: '',
        },
        // 是否禁止点击提示语选中复选框
        labelDisabled: {
            type: [String, Boolean],
            default: '',
        },
        // 选中状态下的颜色
        activeColor: {
            type: String,
            default: '',
        },
        // 禁用状态下的颜色
        disabledColor: {
            type: String,
            default: '',
        },
        // 图标的大小，单位rpx
        iconSize: {
            type: [String, Number],
            default: '',
        },
        // 样式
        customStyle: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {
            checked: false,
            // 故只能使用如此方法
            parentData: {
                iconSize: null,
                labelDisabled: null,
                disabled: null,
                activeColor: null,
                disabledColor: null,
                size: null,
                height: null,
                value: null,
                placement: 'row',
            },
        }
    },
    computed: {
        // 是否禁用，如果父组件edu-raios-group禁用的话，将会忽略子组件的配置
        elDisabled() {
            return this.disabled !== ''
                ? this.disabled
                : this.parentData.disabled !== null
                ? this.parentData.disabled
                : false
        },
        // 是否禁用label点击
        elLabelDisabled() {
            return this.labelDisabled !== ''
                ? this.labelDisabled
                : this.parentData.labelDisabled !== null
                ? this.parentData.labelDisabled
                : false
        },
        // 组件尺寸，对应size的值，默认值为34rpx
        elSize() {
            return this.size ? this.size : this.parentData.size ? this.parentData.size : 34
        },
        // 组件的勾选图标的尺寸，默认20
        elIconSize() {
            let style = {}
            let size = this.iconSize
                ? this.iconSize
                : this.parentData.iconSize
                ? this.parentData.iconSize
                : 20
            style.width = this.$u.addUnit(size)
            style.height = this.$u.addUnit(size)
            return style
        },
        // 组件选中激活时的颜色
        elActiveColor() {
            return this.activeColor
                ? this.activeColor
                : this.parentData.activeColor
                ? this.parentData.activeColor
                : 'primary'
        },
        // 组件选中激活时的颜色
        elDisabledColor() {
            return this.disabledColor
                ? this.disabledColor
                : this.parentData.disabledColor
                ? this.parentData.disabledColor
                : 'primary'
        },
        // 设置radio的状态，要求radio的name等于parent的value时才为选中状态
        iconStyle() {
            let style = {}
            if (this.elDisabled) {
                let color = this.name == this.parentData.value ? this.elDisabledColor : ''
                style.borderColor = color
            } else {
                let color = this.name == this.parentData.value ? this.elActiveColor : ''
                style.borderColor = color
            }

            style.width = this.$u.addUnit(this.elSize)
            style.height = this.$u.addUnit(this.elSize)
            return style
        },
        iconColor() {
            let style = {}
            if (this.elDisabled) {
                let color = this.name == this.parentData.value ? this.elDisabledColor : ''
                style.backgroundColor = color
            } else {
                let color = this.name == this.parentData.value ? this.elActiveColor : ''
                style.backgroundColor = color
            }
            return style
        },
        radioStyle() {
            const style = {}
            if (this.parentData.placement === 'column') {
                style.paddingBottom = '10px'
            }
            return uni.$u.deepMerge(style, this.customStyle)
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.updateParentData()
            // 设置初始化时，是否默认选中的状态
            this.checked = this.name === this.parentData.value
        },
        updateParentData() {
            this.getParentData('exam-radio-group')
        },
        // 点击图标
        iconClickHandler(e) {
            this.preventEvent(e)
            // 如果整体被禁用，不允许被点击
            if (!this.elDisabled) {
                this.setRadioCheckedStatus()
            }
        },
        // 点击label
        labelClickHandler(e) {
            this.preventEvent(e)
            if (!this.elLabelDisabled && !this.elDisabled) {
                this.setRadioCheckedStatus()
            }
        },
        emitEvent() {
            if (!this.checked) {
                this.$emit('change', this.name)
            }
        },
        // 改变组件选中状态
        setRadioCheckedStatus() {
            this.emitEvent()
            // 将本组件标记为选中状态
            this.checked = true
            typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
        },
        // 阻止事件冒泡
        preventEvent(e) {
            e && typeof e.stopPropagation === 'function' && e.stopPropagation()
        },
        getParentData(parentName = '') {
            // 避免在created中去定义parent变量
            if (!this.parent) this.parent = {}
            // 这里的本质原理是，通过获取父组件实例(也即类似u-radio的父组件u-radio-group的this)
            this.parent = uni.$u.$parent.call(this, parentName)
            if (this.parent.children) {
                // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
                this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
            }
            if (this.parent && this.parentData) {
                // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
                Object.keys(this.parentData).map((key) => {
                    this.parentData[key] = this.parent[key]
                })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.exam-radio {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    user-select: none;

    &__icon-wrap {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transition-property: color, border-color, background-color;
        border: 1px solid #b7bac1;
        transition-duration: 0.2s;
        border-radius: 100%;

        &__icon {
            border-radius: 100%;
        }
    }
    &__label {
        word-wrap: break-word;
        margin-left: 10rpx;
        color: $edu-main-color;
        font-size: 30rpx;
    }
}
.exam-radio-label--column {
    .exam-radio {
        &__label {
            flex: 1;
        }
    }
}
</style>
